這次要介紹如何「自製假捲軸」

前言//
大學期間有一次網頁程式課程的作業需要仿製一個網站
該網站的左導覽列內部有自己的捲軸
其實一般網頁根據瀏覽器不同捲軸是可以用不同語法美化的
但需要仿製的那個捲軸平常需要在圖片(內文)下面，滑鼠挪上去時又需要浮在圖片(內文)上方
這個捲軸還不能緊貼在邊框上，還要跟邊框有一些距離

當時的我實在是找不到什麼插件跟語法可以把導覽列的捲軸「變漂亮」又「受控」
所以我就在JS中自己寫了一段假的捲軸讓他在導覽列獨自美麗
今天就把這個假捲軸製作打成一篇文章做分享吧!

正文開始//
首先先做一個普通版本有捲軸div，先在div內隨便打字放圖

<div class="text_box">
    <img src="…" style="width:100%;">
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</br>
    ………
</div>

文字要故意打很多，讓內文超出div大小，然後對text_box設一個overflow:auto;
出來的樣子捲軸會是預設的樣子

第一步我們先用網路上找得到語法把捲軸變好看!!
這邊我是用chrome瀏覽器，所以就只示範chrome語法
加上變漂亮的語法後捲軸變得跟預想中的比較像了

.text_box::-webkit-scrollbar {
  width: 5px;
}

.text_box::-webkit-scrollbar-track {
  border-radius: 0%;
}

.text_box::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #27578f;
}

做到這邊，如果對捲軸沒什麼其他要求，其實就已經很漂亮了

但是作業是要仿製網站，那就得做的越像越好，所以就得繼續讓它變更美麗才行
如上圖所見，我們的捲軸跟內文是很明確地被分開來的
這樣就跟我們預想的捲軸要在圖片或內文上方不符合，所以這邊我在網路上找到了可以讓捲軸在內文之上的語法，overflow: overlay;

基本上已經完全接近預想的畫面了

然後我試著用hover做出平時捲軸在圖片下面，滑鼠移入時才會出現的效果
但是捲軸本身沒有層級的關係，z-index無法有作用
試著改變捲軸本身width寬度也沒有效果，所以搞到這邊後我決定，還是自己做個假的捲軸吧!!

打到這邊發現內文挺足夠的，其實昨天已經把功能寫完了
但整理打字也挺耗時的，所以今天就先到這邊吧((落跑去

今天製作的捲軸都是在css中可以找到語法去美化的!!
明天開始寫我如何做出自製假捲軸，先放個完成圖
左邊是今天成品，右邊是自製捲軸成品